<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="dist/style/bootstrap-reboot.css">-->
    <link rel="stylesheet" href="dist/style/sa.css">
    <title>Document</title>
    <style>
        /*input[type=range] {*/
            /*-webkit-appearance: none;*/
            /*width: 300px;*/
            /*border-radius: 10px; !*这个属性设置使填充进度条时的图形为圆角*!*/
            /*background-size: 0% 50%;*/
            /*background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;*/
        /*}*/
        /*input[type=range]::-webkit-slider-thumb {*/
            /*-webkit-appearance: none;*/
        /*}*/

        /*input[type=range]::-webkit-slider-runnable-track {*/
            /*height: 15px;*/
            /*border-radius: 10px; !*将轨道设为圆角的*!*/
            /*box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; !*轨道内置阴影效果*!*/
        /*}*/

        /*input[type=range]:focus {*/
            /*outline: none;*/
        /*}*/

        /*input[type=range]::-webkit-slider-thumb {*/
            /*-webkit-appearance: none;*/
            /*height: 25px;*/
            /*width: 25px;*/
            /*margin-top: -5px; !*使滑块超出轨道部分的偏移量相等*!*/
            /*background: #ffffff;*/
            /*border-radius: 50%; !*外观设置为圆形*!*/
            /*border: solid 0.125em rgba(205, 224, 230, 0.5); !*设置边框*!*/
            /*box-shadow: 0 .125em .125em #3b4547; !*添加底部阴影*!*/
        /*}*/



    </style>
</head>
<body>
<form>
    <!--<div class="custom-control custom-checkbox">-->
        <!--<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">-->
        <!--<label class="custom-control-label" for="customCheck">自定义复选框</label>-->
    <!--</div>-->
    <div class="container mt-3">
        <h2>自定义滑块控件</h2>
        <p>我们可以在 input 为 type="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件:</p>
        <form action="/action_page.php">
            <label for="customRange">自定义滑块控件</label>
            <input type="range" class="custom-range" id="customRange" name="points1">
            <label for="defaultRange">默认滑块控件</label>
            <input class="custom-range" type="range" id="defaultRange" name="points2">
            <p><button type="submit" class="btn btn-primary">提交</button></p>
        </form>
    </div>
</form>
<input type="range" min="1" max="100" step="5">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="dist/js/sa.js"></script>
<script>
    $.fn.RangeSlider = function(cfg){
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            callback: cfg && cfg.callback ? cfg.callback : null
        };

        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var callback = this.sliderCfg.callback;

        $input.attr('min', min)
          .attr('max', max)
          .attr('step', step);

        $input.bind("input", function(e){
            $input.attr('value', this.value);
            $input.css( 'background-size', this.value + '% 100%' );

            if ($.isFunction(callback)) {
                callback(this);
            }
        });
    };

    var change = function($input) {
        /*内容可自行定义*/
        console.log("123");
    }

    $('input').RangeSlider({ min: 0,   max: 100,  step: 0.1,  callback: change});

    var sup = function(){
        this.name = 'sup';
    }

    sup.prototype.say = 'this is sup'

    var sub = function(){
        this.name = 'sub';
    }

    sup.prototype.say = 'this is sub'

    var s = new sup();
    console.log(s)
    console.log(s.prototype);
</script>


</body>
</html>